<template>
  <div class="insurance-list-page">
    <van-nav-bar
      title="投保信息列表"
      left-text="返回"
      left-arrow
      @click-left="handleGoBack"
    />
    <!-- 搜索与筛选区域 -->
    <div class="search-filter">
      <div class="filter-btns">
        <van-dropdown-menu>
          <van-dropdown-item
            @change="vehicleTypeValueChange"
            v-model="vehicleTypeValue"
            :options="carList"
            title="全部车辆类型"
          />
          <van-dropdown-item
            @change="underwritingResultValueChange"
            v-model="underwritingResultValue"
            :options="underwritingResultOptions"
            title="全部承保结果"
          />
        </van-dropdown-menu>
      </div>
    </div>

    <!-- 记录总数与排序 -->
    <div class="record-sort">
      <span>共 {{ totalRecords }} 条记录</span>
      <!-- <van-dropdown-menu>
        <van-dropdown-item
          v-model="sortValue"
          :options="sortOptions"
          title="排序"
        />
      </van-dropdown-menu> -->
    </div>

    <!-- 投保记录列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多记录了"
      @load="loadRecords"
    >
      <van-cell
        v-for="(record, index) in insuranceRecords"
        :key="index"
        @click="handleViewDetail(record)"
        class="insurance-record"
      >
        <template #title>
          <div class="record-header" style="display: flex; align-items: center; margin-top: 5px">
            <span class="record-number">投保记录</span>
            <van-tag
              :type="getTagType(record.underwritingResult)"
              class="status-tag"
            >{{ record.underwritingResult }}</van-tag>
          </div>
        </template>
        <template #label>
          <div class="record-details">
            <p>姓名：{{ record.fullName }}</p>
            <p>车辆类型：{{ record.vehicleName }}</p>
            <p>号牌号码：{{ record.licensePlate }}</p>
            <p>承保公司：{{ record.companyName }}</p>
            <p>注册日期：{{ record.registrationDate || '-' }}</p>
          </div>
        </template>
        <template #right-icon>
          <van-button
            size="small"
            type="text"
          >详情</van-button>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { showToast } from 'vant';
import { ref, onMounted } from 'vue';
import {
	insuranceList, insurance, systemList
} from '/@/api/auth/ytb.ts'
import { useRouter } from 'vue-router'
 
const router = useRouter()
// 车辆类型下拉值
const vehicleTypeValue = ref(0);
// 承保结果下拉值
const underwritingResultValue = ref(0);
const underwritingResultOptions = ref([
  { text: '全部承保结果', value: '00' },
  { text: '承保成功', value: '01' },
  { text: '处理中', value: '02' },
  { text: '承保失败', value: '03' },
]);
// 排序下拉值
const sortValue = ref(0);
const sortOptions = ref([
  { text: '最新提交', value: 0 },
  // 可根据实际需求添加更多排序选项
]);
// 总记录数
const totalRecords = ref(24);
// 投保记录列表（模拟数据，实际需从接口获取）
const insuranceRecords = ref([]);
// 车辆类型
const carList = ref([
 {text:'货车（新能源）', value: '01'},
 {text:'货车（油车）', value: '02'},
 {text:'挂车', value: '03'},
 {text:'出租车（新能源）', value: '04'},
 {text:'出租车（油车）', value: '05'},
 {text:'网约车（新能源）', value: '06'},
 {text:'网约车（油车）', value: '07'},
 {text:'摩托车', value: '08'},
 {text:'拖拉机（含三轮车、农用车）', value: '09'},
 {text:'私家车（新能源）', value: '10'},
 {text:'其他车型', value: '99'},
])
// 列表加载状态
const loading = ref(false);
const finished = ref(false);

// 根据状态获取标签类型
const getTagType = (status) => {
  if (status === '承保成功') return 'success';
  if (status === '处理中') return 'warning';
  if (status === '承保失败') return 'danger';
  return '';
};

// 加载记录（模拟分页加载，实际需调用接口）
const loadRecords = () => {
  // 模拟异步加载
  setTimeout(() => {
    // 这里可添加接口请求逻辑，获取更多投保记录
    loading.value = false;
    // 若没有更多数据，设置finished为true
    finished.value = true;
  }, 1000);
};


// 返回处理
const handleGoBack = () => {
  router.back();
};

// 查看详情处理
const handleViewDetail = async (record) => {
  // showToast(`查看投保记录 #${record.number} 详情`);
  // const res = await insurance({insuranceId:record.insuranceId})
  router.push({ name: 'Information', query: { insuranceId: record.insuranceId } })
};
// 全部车辆类型改变
const vehicleTypeValueChange = async (v) => {
  getList(v,'0')
}
// 全部承保结果改变
const underwritingResultValueChange = async(v) => {
  getList(v,'1')
}
const suraneList = ref([])
const obj = {
  underwritingResult: '',
  vehicleBigType: ''
}
const getList = async(v,n) => {
  if(n==0) obj.vehicleBigType = v
  if(n==1) obj.underwritingResult = v
  const res = await insuranceList(obj)
  insuranceRecords.value = res.rows
  totalRecords.value = res.total
  insuranceRecords.value.map(z => {
    carList.value.map(v=>{
      if(v.value == z.vehicleType){
        z.vehicleName = v.text
      }
    })
  })
}
onMounted (async() => {
  getList()
  sessionStorage.removeItem('formfullData')
  // const res = await systemList('Industry_supervision_hotline')
}) 

</script>

<style lang="less" scoped>
.insurance-list-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-filter {
  padding: 10px;
  background-color: #fff;
}

.filter-btns {
  margin-top: 10px;
}

.record-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}

.insurance-record {
  margin-bottom: 10px;
  background-color: #fff;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-number {
  font-weight: bold;
}

.status-tag {
  font-size: 12px;
  padding: 2px 6px;
}

.record-details p {
  margin: 4px 0;
}
</style>